<template>
  <div id="app">
    <keep-alive :include="['BasePage']"> 
    <router-view class="main"></router-view>
    </keep-alive>
    <!-- keep-alive include 缓存哪些组件 exclude 排除哪些组件 max 最大缓存组件数 -->
    <!-- 被缓存的组件会多两个生命周期钩子函数
      actived 激活时触发
      deactived 失活时触发
     -->
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
body{
  background-color: aliceblue;
  margin: 0%;
}
#app {
  display: block;
}
.main{
  width: 400px;
    height: 600px;
    margin: auto;
    background-color: white;
    padding: 15px;
    position: relative;
}
</style>
